// 颜色变量
// 背景色
$common-bg-color-red: #ff5c64; // 红色背景色
$common-bg-color-white: #ffffff; // 白色背景色
$common-bg-color-grey: #f7f7f7; // 浅灰背景色
$common-bg-color-darkBlue: #0c284d; // 深蓝色背景色

// 文字颜色
$common-text-color-darkBlue: #0c284d; // 深蓝色文字
$common-text-color-white: #ffffff; // 白色文字
$common-text-color-red: #ff0c4c; // 红色文字
$common-text-color-darkGrey: #6b7696; // 深灰文字
$common-text-color-lightGrey: #d1d1d1; // 浅灰文字

// 盒子相关
// 盒子padding
$common-padding-normal: 16px; // 盒子padding
$common-padding-small: 8px; // 盒子padding小

// 盒子margin
$common-margin-normal: 16px; // 盒子padding
$common-margin-small: 8px; // 盒子padding小
$common-margin-xs: 4px; // 盒子padding小小

// 盒子圆角
$common-border-radius-normal: 16px; // 盒子圆角

// 字体相关
// 字体大小
$common-font-size-normal: 14px; // 正常字体大小
$common-font-size-small: 12px; // 小字体大小
$common-font-size-large: 16px; // 大字体大小
$common-font-size-xl: 20px;

// 字体weight
$common-font-weight-bold: 700; // 正常字体weight
// 字体
body {
	font-family: 'PingFang SC', sans-serif;
	margin: 0;
	padding: 0;
}

// 通用按钮样式
.common-button {
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
}

// 通用卡片样式
.common-card-round {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	padding: 16px;
	margin-bottom: 16px;
}
.common-card {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	padding: 16px;
	margin-bottom: 8px;
}
// ...existing code...

// Flex 布局通用样式

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.flex-column-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-row-start {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.flex-column-start {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.flex-row-end {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.flex-column-end {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

.flex-row-between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.flex-column-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.flex-row-around {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.flex-column-around {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}

.flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
}
